<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/product/pro_details.css">
  <script src="../js/vue.js"></script>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=gCUGKj8m69YPnslsQi13C5LtFhvwrZuP"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
  <div id="app">
    <!--======================== header ========================= -->
    <div id="header">
      <div class="logo">
        <a href="">随风</a>
        <img src="../images/index/logo.jpg" alt="">
      </div>
      <div class="nav">
        <ul>
          <li><a href="">首页</a></li>
          <li><a href="">去旅行</a></li>
          <li><a href="">个人中心</a></li>
          <a href="javascript:void(0)" class="box">
            <input type="text" class="box-search">
          </a>
          <div class="search-btn">
            <a class="btn" href="javascript:void(0)">
              <i class="icon-search"></i>
            </a>
          </div>
        </ul>
      </div>
      <div class="login">
        <a href="../customer/login.html">登录</a>
        <span class="split">|</span>
        <a href="../customer/registe.html">注册</a>
      </div>
    </div>
    <div class="wrapper">
      <div class="wrapper-hd">
        <div class="intro-l">
          <div class="photo">
            <img src="../images/pro4.jpg">
          </div>
          <div class="calendar">
            <div class="cal-month">
              <a href="javascript:void(0)">{{date}}</a>
            </div>
            <div class="cal-day">
              <ul class="week">
                <li>日</li>
                <li>一</li>
                <li>二</li>
                <li>三</li>
                <li>四</li>
                <li>五</li>
                <li>六</li>
              </ul>
              <ul class="list-day">
                <li v-for="(d,index) in monthDay" :ref="'dayItem' + index" @click="changeStyle(d,index)">
                  <div :class="{'highlight':d >=day+1,'border':true}">
                    <div class="day">{{d}}</div>
                    <div class="pro">
                      <span v-if="d >= day+1">￥</span>
                      <span v-if="d >= day+1">1480</span>
                      <br>
                      <span v-if="d >= day+1">{{stock}}</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="intro-r">
          <div class="title">
            <span class="shop">店铺</span>
            <h1>
              【大咖说】诗意拙政园·苏州拙政园讲解半日游（含门票10人团+大咖2·5小时趣味精讲·错峰省力路线·慢逛东西中三园）
            </h1>
            <div class="label">
              <span>超2小时专业讲解</span>
              <span>东西中三园省力游</span>
              <span>看懂苏州园林妙处</span>
            </div>
          </div>
          <div class="price-panel">
            <span>￥138~1498</span>
            <span class="sold">已售506</span>
          </div>
          <div class="info-panel">
            <div class="info-prom">
              <span class="info-la">优惠信息</span>
              <span class="info-ta">促销</span>
            </div>
            <div class="info-tips">
              <div class="tips-prom">
                <span>预订须知</span>
                <span class="text">本商品支付完成即可顺利出行，无需等待确认</span>
              </div>
            </div>
          </div>
          <div class="protype-panel">
            <span class="amount">数量选择</span>
            <span>成人:</span>
            <div class="box">
              <input type="text" class="number1" readonly v-model:value="adultCount">
              <a href="javascript:void(0)" class="plus" @click="increaseAdult">+</a>
              <a href="javascript:void(0)" class="sub" @click="decreaseAdult">-</a>
            </div>
            <span>儿童:</span>
            <div class="box">
              <input type="text" class="number2" readonly v-model:value="childCount">
              <a href="javascript:void(0)" class="plus" @click="increaseChild">+</a>
              <a href="javascript:void(0)" class="sub" @click="decreaseChild">-</a>
            </div>
          </div>
          <div class="action">
            <div class="total">
              <span>{{totalPrice}}</span>
            </div>
            <span class="buy">
              <a href="../order/commit.html">
                立即购买
              </a>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="detail-nav" id="nav">
      <ul>
        <li><a href="#picture-info">图文介绍</a></li>
        <li><a href="#route">地图定位</a></li>
        <li><a href="#price-info">费用说明</a></li>
        <li><a href="#buy-note">购买须知</a></li>
        <li><a href="#review-us">用户点评</a></li>
      </ul>
    </div>
    <div class="part">
      <div id="picture-info">
        <h2>图文介绍</h2>

      </div>
      <div id="route">
        <h2>地图定位</h2>
        <div id="mapholder"></div>
      </div>
      <div id="price-info">
        <h2>费用说明</h2>
        <div class="price-ct">
          <h2>费用包含</h2>
          <div class="price-list-n-t">
            <span>景点门票</span>
            <ul>
              <li>行程中所列景点首道大门票</li>
              <li>门票（不含票版需自行预约门票）</li>
            </ul>
          </div>
          <div class="price-list-n-t">
            <span>餐食</span>
            <ul>
              <li>行程中所列餐食，本行程不含餐，全程餐费自理</li>
            </ul>
          </div>
          <div class="price-list-n-t">
            <span>司导服务</span>
            <ul>
              <li>当地中文导游</li>
              <li>苏州大咖讲师团讲解服务费）</li>
            </ul>
          </div>
          <div class="price-list-n-t">
            <span>其他</span>
            <ul>
              <li>全程保险：bikego为您提供远高市场的安全保障。</li>
            </ul>
          </div>
          <div class="price-fw">
            <h2>费用不含</h2>
            <ul>
              <li>因交通延阻、罢工、天气、飞机、机器故障、航班取消或更改时间等不可抗力原因所导致的额外费用</li>
              <li>一切个人消费及费用包含中未提及的任何费用</li>
            </ul>
          </div>
          <div class="price-ch">
            <h2>儿童政策</h2>
            <ul>
              <li>6岁（含）以下儿童免讲解费，不占席位，不含耳机，不含保险，请家长务必自行看管好自己的小孩；6岁以上请直接购买成人价。 如产生票差视景区实际情况退差补差。</li>
            </ul>
          </div>
        </div>
      </div>
      <div id="buy-note">
        <h2>购买须知</h2>
        <div class="fw">
          <h2>服务信息</h2>
          <div class="tx">
            <p>本商品支付成功后立即确认，无需等待</p>
            <p>本商品无需出团通知书/确认单，预定成功后即可出行</p>
          </div>
        </div>
        <div class="qx">
          <h2>取消政策</h2>
          <div>
            <dl class="detail-alert">
              <dd class="notes-content">
                用户违约规则
                <br>
                预订成功后，因用户原因取消订单的，费用扣除标准如下：
                <br>
                使用日期前1天18:00之前（含）取消，扣除用户订单金额0%作为商家损失费
                <br>
                使用日期前1天18:00之后取消，扣除用户订单金额100%作为商家损失费
                <br>
                如按上述约定比例扣除的必要的费用低于实际发生的费用，用户按照实际发生的费用支付，但不可超出订单总金额。
                <br>
                时差说明
                <br>
                上述时间均为商品当地时间
                <br>
                <br>
                商家违约规则
                <br>
                预订成功后，因商家原因取消订单的，除全额退款外，还应向用户支付违约金（不可抗力除外），标准如下：
                <br>
                使用日期前1天18:00之前（含）取消，除全额退款外，还应向用户支付订单金额的0%作为用户损失费
                <br>
                使用日期前1天18:00之前（含）取消，除全额退款外，还应向用户支付订单金额的0%作为用户损失费
                <br>
                使用日期前1天18:00之后取消，除全额退款外，还应向用户支付订单金额的100%作为用户损失费
                <br>
                如按上述约定比例支付的违约金不足以赔偿用户的实际损失，商家应当按实际损失对用户予以赔偿。
                <br>
                时差说明
                <br>
                上述时间均为商品当地时间
                <br>
              </dd>
            </dl>
          </div>
        </div>
        <div class="fw1">
          <h2>使用说明</h2>
          <div class="tx1">
            <p>工作人员会在您出行前一天23：00前与您确定集合时间及地点，请保持手机畅通，如超时仍未收到，请在线联系客服或者拨打客服热线与我们联系。</p>
            <p class="p5">
              <span style="color: #ff6600;">
                <strong>
                  集合时间与地点:
                </strong>
              </span>
              <br>
              集合时间：上午场约9:00，下午场约13:30
              <br>
              集合地点：景点门口
              <br>
              结束时间：上午场约11:30，下午场16:00
              <br>
              散团地点：当前景点
            </p>
          </div>
        </div>
        <div class="p2">
          <div class="px1">
            <h2>注意事项</h2>
            <p>
              1. 【诚信说明】大咖说会提前按照下单人数为您准备讲解老师，同行若有免费婴儿或临时增加游玩人数，需要提前告知客服，不诚信的超员我们有权拒绝入团哦。
              <br>
              2. 【成团说明】由于2人以下无法成团，为避免影响您的游玩，大咖说工作人员会在出行前1天20:00前（出发地当地时间）通知您并全额退款哦。
              <br>
              3. 【迟到说明】为减少同团客人等待时间，您需要准时出现在与讲解老师约定的地点，若临时耽误，可以提前与讲解老师沟通，修改约定时间。若无故迟到＞15分钟，则视为您主动放弃当日行程，无法退费哦。
              <br>
              4. 【不可抗力】若遇旅游旺季等不可控情况，讲解老师可能会临时调整线路时间顺序等细节安排，一切都是为了更好的行程体验哦。
              <br>
              5. 【免费咨询】行程结束后，大咖说的顾问和讲解老师会继续为您提供当地玩乐信息的咨询服务，散团不散交情。
              <br>
              <strong>6.【包团说明】包团按照实际出行人数选择包团套餐，门票不退费哦！！！</strong>
            </p>
          </div>
        </div>
        <div class="p1">
          <div class="px1">
            <h2>成团说明</h2>
            <p>
              1.本商品最少成团人数为2人，如未达到最少成团人数将在出发前1天通知不成团，如不成团将全额退还您支付的费用。未通知的视为成团。
              <br>
              2.每团最多人数为10人（含占座儿童）
            </p>
          </div>
        </div>
        <div class="p3">
          <div class="px1">
            <h2>购物须知</h2>
            <p>
              本商品全程不含购物店行程（DFS，老佛爷等全球知名百货、景区景点及用户自身要求组织等非平台商家组织的购物除外）
            </p>
          </div>
        </div>
        <div class="p4">
          <div class="px1">
            <h2>其他说明</h2>
            <p>
              本商品全程不推荐、不强制任何自费项目（ 景区景点及用户自身要求安排等非平台商家组织的自费行为不包括在内）
            </p>
          </div>
        </div>
        <div class="p2">
          <div class="px1">
            <h2>重要提示</h2>
            <p>
              1.随风尊重并保护用户隐私，用户信息只会用于协助用户预订旅游商品；
              <br>
              2. 出行前，请您确保您自身的身体状况适合参加行程，您应将自身健康情况如实告知旅行社；
              并请尊重当地的饮食习惯、习俗禁忌、宗教礼仪，
              遵守当地法律法规等；可仔细阅读
              <a style="color: #0000EE;"
                href="https://bigfile.mafengwo.net/s17/M00/4D/95/CoUBXl_hncKALN_SAAWsqbkp5BQ422.pdf">《旅游安全手册》</a>
              ，
              普及自身旅游安全知识，遵守旅游文明公约，使旅程顺遂；
              <br>
              3. 为了您人身、财产的安全，请您避免在公开场合暴露贵重物品及大量现金；
              <br>
              4. 您所预订的商品可能包含高危项目（如游泳、漂流、潜水、滑雪等），参与前请根据自身条件，
              并充分参考当地相关部门及其它专业机构的相关公告和建议后出行，出行前请仔细阅读
              <a style="color: #0000EE;"
                href="https://bigfile.mafengwo.net/s17/M00/4D/96/CoUBXl_hncKAa1VbAAk1UzbMW0A827.pdf">《安全防护指南》</a>
              ；
              <br>
              5. 建议您自己购买旅游意外保险及其他保险，可保障您在境内旅行期间自身生命、
              身体、财产或者相关利益的短期旅游意外伤害保险及紧急救援保险；
              <br>
              6. 请您注意与旅行社签订旅游合同；
              <br>
              7. 预订订单，需要在支付时限内支付全款，超出时限的支付将被视为无效支付，
              系统将在1个工作日内将款项退回原支付的账号里，购买成功会收到确认邮件及短信。
            </p>
          </div>
        </div>
        <div class="p1">
          <div class="px1">
            <h2>产品服务信息</h2>
            <p>该旅游产品由 成都任性旅行社有限公司 提供</p>
          </div>
        </div>
      </div>
      <div id="review-us">
        <h2>用户点评</h2>
        <div class="review-info">
          <div class="review-bar">
            <ul>
              <li>
                <span class="s1">行程安排</span>
                <i></i>
                <span class="s2">4.9</span>
              </li>
              <li>
                <span class="s1">司导服务</span>
                <i></i>
                <span class="s2">4.9</span>
              </li>
              <li>
                <span class="s1">产品体验</span>
                <i></i>
                <span class="s2">4.9</span>
              </li>
              <li>
                <span class="s1">客服服务</span>
                <i></i>
                <span class="s2">4.9</span>
              </li>
            </ul>
          </div>
          <div class="review-list">
            <ul>
              <li>
                <div class="user">
                  <el-avatar icon="el-icon-user-solid"></el-avatar>
                </div>
                <p>
                  之前跟过一次重庆的小团，这次来苏州作为一个人文历史爱好者特意报了拙政园的小团。感谢这次讲解的老师王韦东老师，讲解的挺有趣，
                  很细致，在这样一个有重大历史背景的园林里有精细的讲解比走马观花纯拍照打卡更有意义。
                </p>
                <span>2024-09-07 14:26:00</span>
              </li>
              <li>
                <div class="user">
                  <el-avatar icon="el-icon-user-solid"></el-avatar>
                </div>
                <p>
                  之前跟过一次重庆的小团，这次来苏州作为一个人文历史爱好者特意报了拙政园的小团。感谢这次讲解的老师王韦东老师，讲解的挺有趣，
                  很细致，在这样一个有重大历史背景的园林里有精细的讲解比走马观花纯拍照打卡更有意义。
                </p>
                <span>2024-09-07 14:26:00</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
<script src="../js/product/pro_details.js"></script>